<template>
	<view>
		<!-- 使用自定义搜索组件 -->
		<view class="search-box">
			<!-- 自定义事件处理函数 -->
			<my-search @myclick="getsearchinfo"></my-search>
		</view>
		
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true"  :circular="true" :interval="2500" :duration="1000">
			<!-- 循环渲染数据 -->
			<swiper-item v-for="(item,index) in swiperList" :key="item.goods_id">
				<navigator class="swiper-item" :url="'/subpkg/good_detail/good_detail?good_id='+item.goods_id">
					<!-- 动态绑定图片 -->
					<image :src="item.image_src"></image>
				</navigator>
			</swiper-item>
		</swiper>
		
		<!-- 分类导航栏 -->
		<view class="nav-list">
			<view class="nav-item" v-for="item in navList" :key="item.name" @click="navClickHandler(item)">
				<image class="nav-img" :src="item.image_src" mode=""></image>
			</view>
		</view>
		
		<!-- 首页楼层 -->
		<view class="floor-list">
			<!-- 楼层标题 -->
			<view class="floor-item" v-for="(item,index) in floorList" :key="index">
				<image class="floor-title" :src="item.floor_title.image_src" mode="">
					<!-- 楼层图片 -->
					<view class="floor-img-box">
						<!-- 左侧盒子(一个) -->
						<navigator class="left-img" :url="item.product_list[0].url">
							<image :src="item.product_list[0].image_src" :style="{width:item.product_list[0].image_width+'rpx' }" mode="widthFix"></image>
						</navigator>
						<!-- 右侧盒子（四个） -->
						<view class="right-img">
							<navigator :url="item2.url" class="right-img-item" v-for="(item2,index) in item.product_list" :key="index" v-if="index !== 0">
								<image :src="item2.image_src"  :style="{width:item.product_list[0].image_width+'rpx',height:190+'rpx' }"></image>
							</navigator>
						</view>
					</view>
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	import badgemix from '../../mixins/tabbar-badge.js'
	export default {
		data() {
			return {
				//轮播图数据，默认为空
				swiperList:[],
				//分类导航数据，默认为空
				navList:[],
				// 楼层数据 默认为空
				floorList:[]
				
			};
		},
		mixins:[badgemix],
		methods:{
			// 获取轮播图数据
			async getSwiperList(){
				// 发起请求
				const { data:res } = await uni.$http.get('/api/public/v1/home/swiperdata')
				// console.log(res);
				if(res.meta.status !== 200) return uni.$showMsg()
				//请求成功为data中得swiperList赋值
				this.swiperList = res.message
				// console.log(this.swiperList);
				// uni.$showMsg('数据请求成功！')
			},
			
			// 获取分类导航数据
			async getNavList(){
				const { data:res } = await uni.$http.get('/api/public/v1/home/catitems')
				// console.log('navaList:',res);
				if(res.meta.status !== 200) return uni.$showMsg()
				this.navList = res.message
			},
			
			//点击跳转分类页面方法
			navClickHandler(item){
				if(item.name === '分类'){
					uni.switchTab({
						url:'/pages/cate/cate'
					})
				}
			},
			
			//获取楼层数据
			async getfloorList(){
				const { data:res } = await uni.$http.get('/api/public/v1/home/floordata')
				// console.log('floorList',res);
				if(res.meta.status !== 200) return uni.$showMsg()
				// 对楼层数据的地址进行处理
				res.message.forEach(floor => {
					floor.product_list.forEach(pro => {
						pro.url = '/subpkg/good_list/good_list?'+pro.navigator_url.split('?')[1]
					})
				})
				this.floorList = res.message
			},
			//点击搜索区域跳转搜索页面
			getsearchinfo(){
				uni.navigateTo({
					url:'/subpkg/search/search'
				})
			}
			
		},
		onLoad() {
			//调用方法
			// 轮播图
			this.getSwiperList()
			// 分类导航
			this.getNavList()
			//楼层
			this.getfloorList()
		}
	}
</script>

<style lang="scss">
	.search-box{
		// 吸顶效果
		position: sticky;
		// 距离顶部距离
		top: 0;
		//提升层级
		z-index: 99;
	}
	
	
	swiper{
		height: 330rpx;
		.swiper-item,image{
			width: 100%;
			height: 100%;
		}
	}
	.nav-list{
		display: flex;
		justify-content: space-around;
		margin: 15px 0;
		.nav-img{
			width: 120rpx;
			height: 130rpx;
		}
	}
	
	.floor-list{
		.floor-title{
			height: 60rpx;
			width: 100%;
			// display: flex;
		}
		
		.floor-img-box{
			display: flex;
			padding-left: 10px;	
		}
		.right-img{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
		}
	}
</style>
